<template>
  <el-card class="main-card">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 修改信息 -->
      <el-tab-pane label="网站信息" name="info">
        
      <div class="info-container">
        <el-form
          label-width="100px"
          :model="websiteConfigForm"
          label-position="left"
        >
          <el-form-item label="网站头像">
            <el-upload
              class="avatar-uploader"
              accept="image/jpg,image/jpeg,image/png"
              action="/api/admin/website/config/images"
              :headers="headers"
              :show-file-list="false"
              :before-upload="beforeUpload"
              :on-success="handleWebsiteAvatarSuccess"
            >
              <img
                v-if="websiteConfigForm.websiteAvatar"
                :src="websiteConfigForm.websiteAvatar"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="网站名称">
            <el-input
              v-model="websiteConfigForm.websiteName"
              size="small"
              style="width:400px"
            />
          </el-form-item>
          <el-form-item label="网站作者">
            <el-input
              v-model="websiteConfigForm.websiteAuthor"
              size="small"
              style="width:400px"
            />
          </el-form-item>
          <el-form-item label="网站简介">
            <el-input
              v-model="websiteConfigForm.websiteIntro"
              size="small"
              style="width:400px"
            />
          </el-form-item>
          <el-form-item label="网站创建日期">
            <el-date-picker
              style="width:400px"
              value-format="yyyy-MM-dd"
              v-model="websiteConfigForm.websiteCreateTime"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="网站公告">
            <el-input
              v-model="websiteConfigForm.websiteNotice"
              placeholder="请输入公告内容"
              style="width:400px"
              type="textarea"
              :rows="5"
            />
          </el-form-item>
          <el-form-item label="备案号">
            <el-input
              v-model="websiteConfigForm.websiteRecordNo"
              size="small"
              style="width:400px"
            />
          </el-form-item>
          <el-form-item label="第三方登录">
            <el-checkbox-group v-model="websiteConfigForm.socialLoginList">
              <el-checkbox label="qq">QQ</el-checkbox>
              <el-checkbox label="weibo">微博</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-button @click="delUploadFile(1)" style="margin-left: 8rem">取 消</el-button>
          <el-button
            type="primary"
            size="medium"
            style="margin-left: 8rem"
            @click="updateWebsiteConfig(1)"
          >
            修改
          </el-button>
        </el-form>
        
      </div>
      </el-tab-pane>
      <!-- 网站公告 -->
      <el-tab-pane label="社交信息" name="notice">
        <div class="info-container">
        <el-form label-width="70px" :model="websiteConfigForm">
          <el-checkbox-group v-model="websiteConfigForm.socialUrlList">
            <el-form-item label="QQ">
              <el-input
                v-model="websiteConfigForm.qq"
                size="small"
                style="width:400px;margin-right:1rem"
              />
              <el-checkbox label="qq">是否展示</el-checkbox>
            </el-form-item>
            <el-form-item label="Github">
              <el-input
                v-model="websiteConfigForm.github"
                size="small"
                style="width:400px;margin-right:1rem"
              />
              <el-checkbox label="github">是否展示</el-checkbox>
            </el-form-item>
            <el-form-item label="Gitee">
              <el-input
                v-model="websiteConfigForm.gitee"
                size="small"
                style="width:400px;margin-right:1rem"
              />
              <el-checkbox label="gitee">是否展示</el-checkbox>
            </el-form-item>
            <el-button @click="delUploadFile(2)" style="margin-left:8rem">取 消</el-button>
            <el-button
              type="primary"
              size="medium"
              style="margin-left:8rem"
              @click="updateWebsiteConfig(2)"
            >
              修改
            </el-button>
          </el-checkbox-group>
        </el-form>
        </div>
      </el-tab-pane>
      <!-- 修改密码 -->
      <el-tab-pane label="其他设置" name="password">
        <div class="info-container">
        <el-form
          label-width="120px"
          :model="websiteConfigForm"
          label-position="left"
        >
          <el-row style="width:600px">
            <el-col :md="12">
              <el-form-item label="用户头像">
                <el-upload
                  class="avatar-uploader"
                  accept="image/jpg,image/jpeg,image/png"
                  action="/api/admin/website/config/images"
                  :show-file-list="false"
                  :headers="headers"
                  :before-upload="beforeUpload"
                  :on-success="handleUserAvatarSuccess"
                >
                  <img
                    v-if="websiteConfigForm.userAvatar"
                    :src="websiteConfigForm.userAvatar"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="游客头像">
                <el-upload
                  class="avatar-uploader"
                  accept="image/jpg,image/jpeg,image/png"
                  action="/api/admin/website/config/images"
                  :show-file-list="false"
                  :headers="headers"
                  :before-upload="beforeUpload"
                  :on-success="handleTouristAvatarSuccess"
                >
                  <img
                    v-if="websiteConfigForm.touristAvatar"
                    :src="websiteConfigForm.touristAvatar"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="邮箱通知">
            <el-radio-group v-model="websiteConfigForm.isEmailNotice">
              <el-radio :label="0">关闭</el-radio>
              <el-radio :label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="评论审核">
            <el-radio-group v-model="websiteConfigForm.isCommentReview">
              <el-radio :label="0">关闭</el-radio>
              <el-radio :label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="留言审核">
            <el-radio-group v-model="websiteConfigForm.isMessageReview">
              <el-radio :label="0">关闭</el-radio>
              <el-radio :label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="打赏状态">
            <el-radio-group v-model="websiteConfigForm.isReward">
              <el-radio :label="0">关闭</el-radio>
              <el-radio :label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row style="width:600px" v-show="websiteConfigForm.isReward == 1">
            <el-col :md="12">
              <el-form-item label="微信收款码">
                <el-upload
                  class="avatar-uploader"
                  accept="image/jpg,image/jpeg,image/png"
                  action="/api/admin/website/config/images"
                  :headers="headers"
                  :show-file-list="false"
                  :before-upload="beforeUpload"
                  :on-success="handleWeiXinSuccess"
                >
                  <img
                    v-if="websiteConfigForm.weiXinQRCode"
                    :src="websiteConfigForm.weiXinQRCode"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="支付宝收款码">
                <el-upload
                  class="avatar-uploader"
                  accept="image/jpg,image/jpeg,image/png"
                  action="/api/admin/website/config/images"
                  :headers="headers"
                  :show-file-list="false"
                  :before-upload="beforeUpload"
                  :on-success="handleAlipaySuccess"
                >
                  <img
                    v-if="websiteConfigForm.alipayQRCode"
                    :src="websiteConfigForm.alipayQRCode"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="聊天室状态">
            <el-radio-group v-model="websiteConfigForm.isChatRoom">
              <el-radio :label="0">关闭</el-radio>
              <el-radio :label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="Websocket地址"
            v-show="websiteConfigForm.isChatRoom == 1"
          >
            <el-input
              v-model="websiteConfigForm.websocketUrl"
              size="small"
              style="width:400px"
            />
          </el-form-item>
          <el-form-item label="音乐播放器状态">
            <el-radio-group v-model="websiteConfigForm.isMusicPlayer">
              <el-radio :label="0">关闭</el-radio>
              <el-radio :label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-button @click="delUploadFile(3)" style="margin-left:8rem">取 消</el-button>
          <el-button
            type="primary"
            size="medium"
            style="margin-left:8rem"
            @click="updateWebsiteConfig(3)"
          >
            修改
          </el-button>
        </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import * as imageConversion from "image-conversion";
import store from '../../store';
export default {
  created() {
    this.getWebsiteConfig();
  },
  data: function() {
    return {
      headers:{
        token: store.state.token
      },
      websiteConfigForm: {
        websiteAvatar: "",
        websiteName: "",
        websiteAuthor: "",
        websiteIntro: "",
        websiteNotice: "",
        websiteCreateTime: null,
        websiteRecordNo: "",
        socialLoginList: [],

        socialUrlList: [],
        qq: "",
        github: "",
        gitee: "",

        weiXinQRCode: "",
        alipayQRCode: "",
        userAvatar: "",
        touristAvatar: "",
        websocketUrl: "",
        isReward: 1,
        isChatRoom: 1,
        isMusicPlayer: 1,
        isEmailNotice: 1,
        isCommentReview: 0,
        isMessageReview: 0
      },
      activeName: "info",





      ordWebsiteInfo:{},

      ordData:{
        web: false,
        other: false,
        websiteAvatar: "",
        userAvatar: "",
        touristAvatar: "",
        weiXinQRCode: "",
        alipayQRCode: "",
      },

    };
  },
  methods: {
    beforeUpload(file) {
      return new Promise(resolve => {
        if (file.size / 1024 < this.config.UPLOAD_SIZE) {
          resolve(file);
        }
        // 压缩到200KB,这里的200就是要压缩的大小,可自定义
        imageConversion
          .compressAccurately(file, this.config.UPLOAD_SIZE)
          .then(res => {
            resolve(res);
          });
      });
    },
    getWebsiteConfig() {
      this.axios.get("/api/admin/website/config").then(({ data }) => {
        this.websiteConfigForm = data.data;
        this.ordWebsiteInfo = JSON.parse(JSON.stringify(this.websiteConfigForm));
      });
    },
    handleClick(tab) {
      console.log(tab);
    },
    handleWebsiteAvatarSuccess(response) {
      this.ordData.websiteAvatar = this.websiteConfigForm.websiteAvatar;
      this.ordData.web = true;
      this.websiteConfigForm.websiteAvatar = response.data;
    },
    handleUserAvatarSuccess(response) {
      this.ordData.userAvatar = this.websiteConfigForm.userAvatar;
      this.ordData.other = true;
      this.websiteConfigForm.userAvatar = response.data;
    },
    handleTouristAvatarSuccess(response) {
      this.ordData.touristAvatar = this.websiteConfigForm.touristAvatar;
      this.ordData.other = true;
      this.websiteConfigForm.touristAvatar = response.data;
    },
    handleWeiXinSuccess(response) {
      this.ordData.weiXinQRCode = this.websiteConfigForm.weiXinQRCode;
      this.ordData.other = true;
      this.websiteConfigForm.weiXinQRCode = response.data;
    },
    handleAlipaySuccess(response) {
      this.ordData.alipayQRCode = this.websiteConfigForm.alipayQRCode;
      this.ordData.other = true;
      this.websiteConfigForm.alipayQRCode = response.data;
    },
    updateWebsiteConfig(code) {
      if(code === 1){
        this.updateWebsiteInfo();
      }else if(code === 2){
        this.updateSocial();
      }else if(code === 3){
        this.updateWebsiteAndRes();
      }
      this.updateProperties(code);
      this.ordData.web = false;
      this.ordData.other = false;
    },
    updateWebsiteInfo(){
      var websiteInfoForm = {
        websiteAvatar: this.websiteConfigForm.websiteAvatar,
        websiteName: this.websiteConfigForm.websiteName,
        websiteAuthor: this.websiteConfigForm.websiteAuthor,
        websiteIntro: this.websiteConfigForm.websiteIntro,
        websiteNotice: this.websiteConfigForm.websiteNotice,
        websiteCreateTime: this.websiteConfigForm.websiteCreateTime,
        websiteRecordNo: this.websiteConfigForm.websiteRecordNo,
      };
        var qqType = true;
        var weiboType = true;
        var socialLoginForm = [];
        this.websiteConfigForm.socialLoginList.forEach(item => {
          if(item === "qq"){
            qqType =false;
            socialLoginForm.push({
              loginType: item,
              isDisable: 0,
            });
          }else if(item === "weibo"){
            weiboType = false;
            socialLoginForm.push({
              loginType: item,
              isDisable: 0,
            }); 
          }
        });
        if(qqType){
          socialLoginForm.push({
              loginType: "qq",
              isDisable: 1,
            });
        }
        if(weiboType){
          socialLoginForm.push({
              loginType: "weibo",
              isDisable: 1,
            });
        }
        var form = {
          websiteInfo : websiteInfoForm,
          socialLoginList : socialLoginForm
        };
        this.axios
          .put("/api/admin/website/config/info", form)
          .then(({ data }) => {
            if (data.flag) {
              this.$notify.success({
                title: "成功",
                message: data.message
              });
            } else {
              this.$notify.error({
                title: "失败",
                message: data.message
              });
            }
          });
    },
    updateSocial(){
        var qqType = true;
        var giteeType = true;
        var githubTyep = true;
        var socialList = [];
        this.websiteConfigForm.socialUrlList.forEach(item => {
          var url = "";
          if(item === "qq"){
            qqType = false;
            url = this.websiteConfigForm.qq;
          }else if(item === "github"){
            giteeType = false;
            url = this.websiteConfigForm.github;
          }else if(item === "gitee"){
            githubTyep = false;
            url = this.websiteConfigForm.gitee;
          }
          socialList.push({
            socialType: item,
            socialUrl: url,
            isHidden: 0,
          });
        });
        if(qqType){
          socialList.push({
            socialType: "qq",
            socialUrl: this.websiteConfigForm.qq,
            isHidden: 1,
          });
        }
        if(giteeType){
          socialList.push({
            socialType: "gitee",
            socialUrl: this.websiteConfigForm.gitee,
            isHidden: 1,
          });
        }
        if(githubTyep){
          socialList.push({
            socialType: "github",
            socialUrl: this.websiteConfigForm.github,
            isHidden: 1,
          });
        }
        this.axios
        .put("/api/admin/website/config/social", socialList)
        .then(({ data }) => {
          if (data.flag) {
            this.$notify.success({
              title: "成功",
              message: data.message
            });
          } else {
            this.$notify.error({
              title: "失败",
              message: data.message
            });
          }
        });
    },
    updateWebsiteAndRes(){
      var websiteForm = {
        isChatRoom: this.websiteConfigForm.isChatRoom,
        isEmailNotice: this.websiteConfigForm.isEmailNotice,
        isCommentReview: this.websiteConfigForm.isCommentReview,
        isMessageReview: this.websiteConfigForm.isMessageReview,
        isMusicPlayer: this.websiteConfigForm.isMusicPlayer,
        isReward: this.websiteConfigForm.isReward,
      };
      var websiteResForm = {
        userAvatar: this.websiteConfigForm.userAvatar,
        touristAvatar: this.websiteConfigForm.touristAvatar,
        weiXinQRCode: this.websiteConfigForm.weiXinQRCode,
        alipayQRCode: this.websiteConfigForm.alipayQRCode,
      };
      var form = {
        website : websiteForm,
        websiteRes : websiteResForm,
        websocketUrl : this.websiteConfigForm.websocketUrl
      };

        this.axios
        .put("/api/admin/website/config/res", form)
        .then(({ data }) => {
          if (data.flag) {
            this.$notify.success({
              title: "成功",
              message: data.message
            });
          } else {
            this.$notify.error({
              title: "失败",
              message: data.message
            });
          }
        });
    },


    
    delUploadFile(code) {
      if(code === 1){
        
        if(this.ordData.web){
          if(this.ordData.websiteAvatar.trim() !== ""){
            var param = { filePath : this.websiteConfigForm.websiteAvatar };

            this.websiteConfigForm.websiteAvatar = this.ordData.websiteAvatar;
            this.delFile(param);
          }
          this.ordData.web = false;
        }

      }else if(code === 3){
        if(this.ordData.other){
          if(this.ordData.alipayQRCode.trim() !== ""){
            var param = { filePath : this.websiteConfigForm.alipayQRCode };

            this.websiteConfigForm.alipayQRCode = this.ordData.alipayQRCode;
            this.delFile(param);
          }
          if(this.ordData.weiXinQRCode.trim() !== ""){
            var param = { filePath : this.websiteConfigForm.weiXinQRCode };

            this.websiteConfigForm.weiXinQRCode = this.ordData.weiXinQRCode;
            this.delFile(param);
          }
          if(this.ordData.touristAvatar.trim() !== ""){
            var param = { filePath : this.websiteConfigForm.touristAvatar };

            this.websiteConfigForm.touristAvatar = this.ordData.touristAvatar;
            this.delFile(param);
          }
          if(this.ordData.userAvatar.trim() !== ""){
            var param = { filePath : this.websiteConfigForm.userAvatar };

            this.websiteConfigForm.userAvatar = this.ordData.userAvatar;
            this.delFile(param);
          }
          this.ordData.other = false;
        }

      }

      this.resetProperties(code);

    },
    delFile(param){
      this.axios.delete("/api/admin/website/config/delImages",{ params: param })
      .then(({data}) => {
        if(data.flag){
          this.ordData.userAvatar = "";
        }
      });
    },
    resetProperties(code){
      if(code === 1){
        this.websiteConfigForm.websiteAvatar = this.ordWebsiteInfo.websiteAvatar;
        this.websiteConfigForm.websiteName = this.ordWebsiteInfo.websiteName;
        this.websiteConfigForm.websiteAuthor = this.ordWebsiteInfo.websiteAuthor;
        this.websiteConfigForm.websiteIntro = this.ordWebsiteInfo.websiteIntro;
        this.websiteConfigForm.websiteNotice = this.ordWebsiteInfo.websiteNotice;
        this.websiteConfigForm.websiteCreateTime = this.ordWebsiteInfo.websiteCreateTime;
        this.websiteConfigForm.websiteRecordNo = this.ordWebsiteInfo.websiteRecordNo;
        this.websiteConfigForm.socialLoginList = this.ordWebsiteInfo.socialLoginList;
      }else if(code === 2){
        this.websiteConfigForm.socialUrlList = this.ordWebsiteInfo.socialUrlList;
        this.websiteConfigForm.qq = this.ordWebsiteInfo.qq;
        this.websiteConfigForm.github = this.ordWebsiteInfo.github;
        this.websiteConfigForm.gitee = this.ordWebsiteInfo.gitee;
      }else if(code === 3){
        this.websiteConfigForm.weiXinQRCode = this.ordWebsiteInfo.weiXinQRCode;
        this.websiteConfigForm.alipayQRCode = this.ordWebsiteInfo.alipayQRCode;
        this.websiteConfigForm.userAvatar = this.ordWebsiteInfo.userAvatar;
        this.websiteConfigForm.touristAvatar = this.ordWebsiteInfo.touristAvatar;
        this.websiteConfigForm.websocketUrl = this.ordWebsiteInfo.websocketUrl;
        this.websiteConfigForm.isReward = this.ordWebsiteInfo.isReward;
        this.websiteConfigForm.isChatRoom = this.ordWebsiteInfo.isChatRoom;
        this.websiteConfigForm.isMusicPlayer = this.ordWebsiteInfo.isMusicPlayer;
        this.websiteConfigForm.isEmailNotice = this.ordWebsiteInfo.isEmailNotice;
        this.websiteConfigForm.isCommentReview = this.ordWebsiteInfo.isCommentReview;
        this.websiteConfigForm.isMessageReview = this.ordWebsiteInfo.isMessageReview;
      }
    },
    updateProperties(code){
      if(code === 1){
        this.ordWebsiteInfo.websiteAvatar = this.websiteConfigForm.websiteAvatar;
        this.ordWebsiteInfo.websiteName = this.websiteConfigForm.websiteName;
        this.ordWebsiteInfo.websiteAuthor = this.websiteConfigForm.websiteAuthor;
        this.ordWebsiteInfo.websiteIntro = this.websiteConfigForm.websiteIntro;
        this.ordWebsiteInfo.websiteNotice = this.websiteConfigForm.websiteNotice;
        this.ordWebsiteInfo.websiteCreateTime = this.websiteConfigForm.websiteCreateTime;
        this.ordWebsiteInfo.websiteRecordNo = this.websiteConfigForm.websiteRecordNo;
        this.ordWebsiteInfo.socialLoginList = this.websiteConfigForm.socialLoginList;
      }else if(code === 2){
        this.ordWebsiteInfo.socialUrlList = this.websiteConfigForm.socialUrlList;
        this.ordWebsiteInfo.qq = this.websiteConfigForm.qq;
        this.ordWebsiteInfo.github = this.websiteConfigForm.github;
        this.ordWebsiteInfo.gitee = this.websiteConfigForm.gitee;
      }else if(code === 3){
        this.ordWebsiteInfo.weiXinQRCode = this.websiteConfigForm.weiXinQRCode;
        this.ordWebsiteInfo.alipayQRCode = this.websiteConfigForm.alipayQRCode;
        this.ordWebsiteInfo.userAvatar = this.websiteConfigForm.userAvatar;
        this.ordWebsiteInfo.touristAvatar = this.websiteConfigForm.touristAvatar;
        this.ordWebsiteInfo.websocketUrl = this.websiteConfigForm.websocketUrl;
        this.ordWebsiteInfo.isReward = this.websiteConfigForm.isReward;
        this.ordWebsiteInfo.isChatRoom = this.websiteConfigForm.isChatRoom;
        this.ordWebsiteInfo.isMusicPlayer = this.websiteConfigForm.isMusicPlayer;
        this.ordWebsiteInfo.isEmailNotice = this.websiteConfigForm.isEmailNotice;
        this.ordWebsiteInfo.isCommentReview = this.websiteConfigForm.isCommentReview;
        this.ordWebsiteInfo.isMessageReview = this.websiteConfigForm.isMessageReview;
      }
      this.removeOrdData();
    },
    removeOrdData(){
        this.ordData.websiteAvatar = "";
        this.ordData.userAvatar = "";
        this.ordData.touristAvatar = "";
        this.ordData.weiXinQRCode = "";
        this.ordData.alipayQRCode = "";
    },




  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: block;
}
.info-container {
  display: flex;
  align-items: center;
  margin-left: 10%;
  margin-top: 3rem;
}
</style>
